// webpack 用的是node的方法 common.js
const path = require('path');
//引入安装包 
const htmlWebpackPlugin = require('html-webpack-plugin');
// 实例化
const htmlWplugins = new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),//表示以谁为模板进行打包
    filename: "index.html",//生成的模块文件名字
    title: 'webpack学习中',
});//默认是index.html



module.exports = {
    mode: 'development',//development 开发模式 //production 线上模式
    entry: path.join(__dirname, './src/index.js'),//webpack打包的入口文件,打包的入口文件路径需要采用绝对路径
    output: {//打包的出口文件， 出口文件的位置， 出口文件的名字
        path: path.join(__dirname, './dist'),//出口文件的位置 dist是默认打包文件目录
        filename: 'bundle.js',//出口文件的名字
    },
    //挂载并使用插件
    plugins: [
        htmlWplugins
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            }, {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            }, {
                test: /\.s[ac]ss$/i,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ],
            },
        ]
    }
}

